import React from 'react';
import { browserHistory } from 'react-router';
import { Form, Icon, Input, Button, Checkbox, Spin, Carousel } from 'antd';
const FormItem = Form.Item;
import * as actions from './../../actions/backstage/loginAction';

class NormalLoginForm extends React.Component {
  constructor(props) {
      super(props)
      this.state = {
          loading: false,
          autoplay: false
      }
  }

  componentDidMount(){
    window.onresize = function () {
      var clientHeight = document.body.clientHeight;
      var marginTop = (document.body.clientHeight/2) - 189;
      var marginRight = parseInt(document.body.clientWidth/2)-240;

      $(".login").css("marginTop",marginTop + "px");
      $(".loginForm").css("marginTop",marginTop + "px");
      $(".login").css("marginRight",marginRight + "px");
      $(".loginForm").css("marginRight",marginRight + "px");

      $(".divCarousel").css("height",clientHeight + "px");
      $(".video-player").css("height",clientHeight + "px");
      $(".divItemVideo").css("height",clientHeight + "px");
      $(".divItemStep2").css("height",clientHeight + "px");
      $(".divItemStep3").css("height",clientHeight + "px");

      if($(".center-modal").length > 0){
          var scrollbarHeight = that.getSizeWithScrollbar();
          $(".divFlexListMini").css("maxHeight",(scrollbarHeight.height - 213)+"px")
          $(".center-modal").find(".ant-modal-content").css("height", scrollbarHeight.height + "px");
      }
    }

    window.onresize(); var that = this;
    var video = document.getElementById("video");

    if(video != null){
      video.addEventListener('ended',function(){
        video.load();
        that.slider.slick.slickPlay();
        that.slider.slick.slickGoTo(1);
        that.setState({autoplay: true});
      },false);

      setTimeout(function () {
        video.play();
      }, 500);
    }else {
      // if(sessionStorage.getItem("staffAuth") != null){
      //   browserHistory.push("/backstage/home");
      // }
    }
  }
  getSizeWithScrollbar(){
      if(window.innerWidth){
          return {
            width : window.innerWidth,
            height: window.innerHeight
          }
      }else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){
          return {
            width : document.documentElement.offsetWidth,
            height: document.documentElement.offsetHeight
          }
      }else{
          return {
            width : document.documentElement.clientWidth + getScrollWith(),
            height: document.documentElement.clientHeight + getScrollWith()
          }
      }
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        sessionStorage.setItem("staffUserName", values.username);
        if(values.username.indexOf("@") == -1){
            actions.login(this,{
                username: values.username,
                password: values.password
            });
        }else{
            actions.login(this,{
                email: values.username,
                password: values.password
            });
        }
      }
    });
  }
  render() {
    if(sessionStorage.getItem("staffAuth") == null){
      const { getFieldDecorator } = this.props.form;
      return (
        <div className="login" style={{backgroundColor: 'rgba(211,211,212,0.7)', boxShadow: '0 0 10px #525252', border: '1px solid #D3D3D4', borderRadius: '4px'}}>
          <div id="container" className="container" style={{top: '-1px'}}>
            {
              // <div id="output" className="container"></div>
            }
            <Carousel ref={slider => (this.slider = slider)} autoplay={this.state.autoplay} vertical className="divCarousel">
              <div className="divItemVideo">
                <video id="video" poster="/src/styles/images/login/T1k5ReXXlkXXXXXXXX.jpg" muted className="video-player">
                  <source src="/src/styles/images/login/T1T78eXapfXXXXXXXX.mp4" type="video/mp4" />
                </video>
              </div>
              <div className="divItemStep2"></div>
              <div className="divItemStep3"></div>
            </Carousel>

            <div className="loginForm" style={{width: '481px', float: 'right', boxShadow: 'none'}}>
                <Spin spinning={this.state.loading} tip="登录中, 请稍候...">
                  <div className="divHeader" style={{paddingTop: '43px', marginBottom: '41px'}}>
                      <img src="/src/styles/images/adminLogin.png" width="330"/>
                  </div>
                  <Form onSubmit={this.handleSubmit} className="login-form">
                    <FormItem>
                      {getFieldDecorator('username', {
                        rules: [{ required: true, message: '账号或邮箱 不能为空。' }],
                      })(
                        <Input addonBefore={<Icon type="user" size="large" style={{ fontSize: 14 }} />} placeholder="请输入账号 / 邮箱..." size="large" />
                      )}
                    </FormItem>
                    <FormItem>
                      {getFieldDecorator('password', {
                        rules: [{ required: true, message: '密码 不能为空。' }],
                      })(
                        <Input addonBefore={<Icon type="lock" style={{ fontSize: 14 }} />} type="password" placeholder="请输入密码..." size="large"/>
                      )}
                    </FormItem>
                    <FormItem>
                      {getFieldDecorator('remember', {
                        valuePropName: 'checked',
                        initialValue: false,
                      })(
                        <Checkbox>记住密码</Checkbox>
                      )}
                      <Button type="primary" htmlType="submit" className="login-form-button">登 录</Button>
                    </FormItem>
                  </Form>
                </Spin>
                <div className="divFooter">支持 IE10 及以上版本的浏览器。为了您更顺畅的使用体验，建议使用：谷歌 Chrome 浏览器</div>
            </div>
          </div>
        </div>
      );
    }else {
      return this.props.children
    }
  }
}
const LoginForm = Form.create()(NormalLoginForm);
export default LoginForm;
